<script setup>
import { toRefs } from 'vue'
import useMenuStore from '@/stores/menu-store'

const menuStore = useMenuStore()

defineOptions({
  name: 'CommonForm'
})
const modelValue = defineModel({type: Boolean})
const props = defineProps({
  loading: Boolean,
  editFlag: Number, //编辑状态 0:新增 1:编辑 2:只读（默认只读 防止初加载时出现 编辑按钮）
  width: {
    type: String,
    default: '820px'
  },
  title: {
    type: String,
    default: '表单'
  },
  editTitle: {
    type: String,
    default: '编辑'
  },
  newTitle: {
    type: String,
    default: '添加'
  }
})

const emit = defineEmits(['update:parentInfo', 'on-close', 'on-back', 'on-save'])
const {width, title, editTitle, newTitle,editFlag} = toRefs(props)
const getFormType = () => {
  let _title = newTitle.value
  //editFlag 编辑状态 1编辑 2只读查看
  if (editFlag.value === 1) {
    // 编辑表单
    _title = editTitle.value
  } else if (editFlag.value === 2) {
    // 只读 表单
    _title = '查看'
  }
  return _title
}
</script>

<template>
  <div class="common-form" v-loading="loading">
    <ElScrollbar>
      <div class="form-content">
        <div class="form-content__header">
          <div class="form-content__title">
            {{ getFormType() }}{{ title }}
          </div>
<!--          <div class="form-content__header-right">-->
<!--            <ElButton size="small" :icon="Back" link @click="emit('on-back')">返回</ElButton>-->
<!--          </div>-->
        </div>
        <slot></slot>
        <!-- 只读表单  editFlag===2  -->
        <template v-if="$slots.formFooter">
          <div class="form-footer">
            <slot name="formFooter"/>
          </div>
        </template>
        <slot v-else name="footer">
          <div class="form-footer">
            <!--  editFlag==2 为只读，不显示 menuStore.query.editFlag=0时为 不存在值 -->
            <SaveButton v-if="editFlag!==2" :loading="loading"
                        @on-save="emit('on-save')" title=""/>
            <GoBackButton :loading="loading" @on-back="emit('on-back')"/>
          </div>
        </slot>
      </div>
    </ElScrollbar>
  </div>
</template>
<style lang="scss">
.common-form {
  position: relative;
  height: 100%;
  background: #f7f8fa;

  .form-content__header {
    @include flex;
    height: 40px;
    line-height: 40px;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);

    .form-content__title {
      @include flex-1;
      font-size: 15px;

      &:before {
        display: inline-block;
        width: 4px;
        height: 16px;
        vertical-align: -2px;
        margin-right: 6px;
        background: var(--color-primary);
        content: '';
      }
    }

    .form-content__header-right {
      text-align: right;
      margin-bottom: 12px;
    }
  }

  .form-content {
    width: v-bind(width);
    padding: 1rem 2rem 2rem;
    margin: 2rem auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 1px 2px 6px 2px rgba(111, 144, 210, .4);

    .el-form {
      .el-row {
        padding-right: 2em;
      }
    }
  }

  .form-footer {
    text-align: center;
  }

  :slotted(.el-form) {

  }
}
</style>
